.header {
  position: sticky;
  top: 0;
  transition: box-shadow 150ms ease;
  z-index: 10;
  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: light-dark(
      1px solid var(--mantine-color-gray-2),
      1px solid var(--mantine-color-dark-7)
    );
  }
}

.scrolled {
  box-shadow: var(--mantine-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
}
